<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Profound Grid | A grid system for fixed and fluid layouts</title>
        
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <meta name="title" content="Profound Grid | A grid system for fixed and fluid layouts" />
        <meta name="description" content="Profound Grid is a responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control." />
        <meta name="keywords" content="CSS, grid, grid system, Profound, fixed, layout, fluid, responsive, adaptive, design" />
        
        <meta property="og:url" content="http://www.profoundgrid.com"/>
        <meta property="og:title" content="Profound Grid | A grid system for fixed and fluid layouts"/> 
        <meta property="og:type" content="website"/> 
        <meta property="og:image" content="http://www.profoundgrid.com/img/example_grid_fixed.png"/> 
        <meta property="og:site_name" content="Profound Grid"/> 
        <meta property="og:description" content="Profound Grid is a responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control."/>
        <meta name="viewport" content="initial-scale=1,minimum-scale=1,width=device-width">

        <!-- Javascript -->
        <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>

        <!-- Stylesheets -->
        <link href='http://fonts.googleapis.com/css?family=Raleway:500,900,200' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="/css/examples/maxwidth.css" type="text/css" media="screen" />


        <!--[if lt IE 9]>
            <script type="text/javascript" src="/js/html5shiv.js"></script>
            <script type="text/javascript" src="/js/selectivizr.js"></script>
            <script type="text/javascript" src="/js/respond.js"></script>
        <![endif]-->
    </head>

    <body>

        <nav>
            <div class="center">
                <ul>
                    <li>
                        <a href='#' title="Show Grid" id="gridButton" onclick="return false;">Show Grid</a>
                    </li>
                    <li>
                        <a href="/" id="logo"><img src="/img/logo_top.png" /></a>
                    </li>
                    <li>
                        <a id="navDownload" title="Download .Zip File" href='https://github.com/artofrawr/profoundgrid/archive/master.zip'>Download .Zip File</a>
                        <a id="navGithub" title="Fork On Github" href='https://github.com/artofrawr/profoundgrid/'>Fork On Github</a>
                        <a id="navFacebook" title="Share On Facebook" href='http://www.facebook.com/sharer.php?u=http://www.profoundgrid.com'>Share on Facebook</a>
                        <a id="navTwitter" title="Share On Twitter" href='http://twitter.com/?status=http%3A%2F%2Fwww.profoundgrid.com+by+%40weareprofound'>Share on Twitter</a>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- Header -->
        <header>
            <div class="center">
                <a href='fluid.html' title="Show Grid" id="example_prev"><i class="arrow-left"></i><span>previous</span></a>
                <h1>FLUID GRID, MAX-WIDTH, NO SIDE MARGIN WHEN FLUID</h1>
                <a href='fluidresponsive.html' title="Show Grid" id="example_next"><i class="arrow-right"></i><span>next</span></a>
            </div>
        </header>

        <article id="semantic">
            <div class="col1 push0">1</div>
            <div class="col1 push1">1</div>
            <div class="col1 push2">1</div>
            <div class="col1 push3">1</div>
            <div class="col1 push4">1</div>
            <div class="col1 push5">1</div>
            <div class="col1 push6">1</div>
            <div class="col1 push7">1</div>
            <div class="col1 push8">1</div>
            <div class="col1 push9">1</div>
            <div class="col1 push10">1</div>
            <div class="col1 push11">1</div>
        </article>

        <article>
            <div class="col2 push0">2</div>
            <div class="col2 push2">2</div>
            <div class="col2 push4">2</div>
            <div class="col3 push6">3</div>
            <div class="col3 push9">3</div>
        </article>

        <article>
            <div class="col4 push0">4</div>
            <div class="col4 push4">4</div>
            <div class="col4 push8">4</div>
        </article>

        <article>
            <div class="col6 push0">6</div>
            <div class="col6 push6">6</div>
        </article>

        <article>
            <div class="col12 push0">12</div>
        </article>

        <footer>
            <div class="center">
                <h3>BUILT BY</h3>
                <section id="company">
                    <a href="http://www.weareprofound.com">PROFOUND</a>
                </section>
                <section id="meta">
                    <div>Copyright &copy; 2009-2012 Profound Creative Studio LLC. All rights reserved. </div>
                    <div>
                        <a href="http://www.facebook.com/pages/Profound/174209019285677">Profound on Facebook</a>
                        <a href="https://twitter.com/weareprofound">Profound on Twitter</a>
                    </div>  
                </section>
            </div>
        </footer>
        
        <script type="text/javascript">

            // TOGGLE GRID
            $('#gridButton').click(function(){
                if($('#grid').length == 0) {
                    var height = $('body').height();
                    var html = '<article id="grid"><div class="overlay"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></article>';
                    $('body').prepend(html);
                    $('#grid div').css('height', height);
                }else{
                    $('#grid').remove();
                }
            });

            $(window).resize(function() {
                if($('#grid').length > 0) {
                    var height = $('body').height();
                    $('#grid div').css('height', height);
                }
            });

            // CHANGE GRID OVERLAY BEHAVIOUR FOR BROWSERS
            // THAT DONT SUPPORT "pointer-events: none;" CSS
            if ($.browser.msie || $.browser.opera) {
              $('#grid').live('click', function(){
                $('#grid').remove();
              });
            }

            // TOOLTIP
            var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
            $('nav a').hover(function(){
                if (isMobile == false){
                    var pos = $(this).offset();
                    var title = $(this).attr('title');
                    if ($.trim(title) == ''){
                        return;
                    }
                    $(this).data('tipText', title).removeAttr('title');
                    if($('.tooltip').length == 0) {
                        var html = '<p class="tooltip"></p>';
                        $('body').append(html);
                    }
                    $('.tooltip').html('<div class="arrow"></div><div>'+title+'</div>');
                    $('.tooltip').css('top', pos.top+55).css('left', pos.left+25);
                    var width = $('.tooltip').outerWidth();
                    $('.tooltip').css('margin-left', 0-width*0.5);
                    $('.tooltip').addClass('show');
                }
            }, function() {
                if (isMobile == false){
                    $('.tooltip').removeClass('show');
                    $(this).attr('title', $(this).data('tipText'));
                }
            });

            
        </script>
        <script type="text/javascript">

          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-9052680-6']);
          _gaq.push(['_trackPageview']);

          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();

        </script>

    </body>
</html>